<template>
  <div class="ai-header">
    <!-- 后台按钮 -->
    <div style="display: flex;">
      <div
        @click="handleFullScreen"
        style="color: rgb(0, 186, 255); font-size: 24px; margin-top: 37px"
      >
        <div v-if="fullscreen">
          <i class="el-icon-aim"></i>
          <span style="font-size: 20px"> 退出全屏</span>
        </div>
        <div v-else>
          <i class="el-icon-full-screen"></i
          ><span style="font-size: 20px"> 全屏</span>
        </div>
      </div>
      <div
        @click="toTableDetail"
        style="
          margin-top: 32px;
          font-weight: bolder;
          cursor: pointer;
          margin-left: 20px;
        "
      >
        <el-tooltip content="查看更多" placement="bottom" effect="light">
          <el-button><i class="el-icon-s-order"></i></el-button>
        </el-tooltip>
      </div>
      <div v-if="inner" @click="back"><el-button style="width: 58px;height: 40px;margin-left: 30px;margin-top: 32px;" type="warning" icon="el-icon-s-home" plain></el-button></div>
      <div v-if="outer" @click="toInternalControl"><el-button style="width: 58px;height: 40px;margin-left: 30px;margin-top: 32px;" type="warning" icon="el-icon-s-platform" plain></el-button></div>
    </div>
    <div
      class="title"
      style="color: rgb(0, 193, 255); font-weight: bolder; font-size: 38px"
    >
    {{ outer?'优食安数字食堂云平台':' 优食安数字食堂内控管理大屏' }}
    </div>
    <!-- 退出按钮 -->
    <div class="ai-header-left" @click="out">退出</div>
  </div>
</template>

<script>
export default {
  data() {
    return {      
      fullscreen: false
    };
  },
  mounted(){
  },
  props:{
    outer: {
      type: Boolean,
      default: false,
    },
    inner: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        console.log("已还原！");
      } else {
        // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          console.log('5');
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
        console.log("已全屏！");
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen;
    },    
    // 退出登录
    out() {
      sessionStorage.removeItem("token");
      this.$router.push("login");
    },
    // 去详情页
    toTableDetail() {
      this.$router.push({path:"/warehouseLedger"});
    },
    // 去内控大屏页面
    toInternalControl() {
      this.$router.replace({
              path: "/internalControl"
            });
    },
    // 返回
    back() {
      this.$router.push({path:"/larges"});
    }
  },
  mounted(){
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-icon-s-order,
::v-deep .el-icon-s-home:before,
::v-deep .el-icon-s-platform:before{
  font-size: 26px;
}
::v-deep .el-button{
  padding: 6px 14px;
}
// ::v-deep .el-button--warning.is-plain{
//   height: 40px !important;
//   width: 55px !important;
// }

/* 头部 */
.ai-header {
  min-width: 1200px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8.3%;
  background-image: url("../assets/image/header-bg.c3c4c3c7.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ai-header-left {
  background: url("../assets/image/下载.png");
  width: 94px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 18px;
  color: white;
  cursor: pointer;
  margin-top: 37px;
}

.ai-header img {
  width: 20%;
  height: 60%;
}
</style>
